<template>
  <div class="split-container">
    <div 
      class="left-panel" 
      :style="{ 
        width: isCollapsed ? '0px' : leftWidth + 'px',
        minWidth: isCollapsed ? '0px' : leftWidth + 'px',
        maxWidth: isCollapsed ? '0px' : leftWidth + 'px'
      }"
    >
      <div class="left-content" v-show="!isCollapsed">
        <slot name="left"></slot>
      </div>
    </div>
    
    <div 
      class="splitter" 
      :style="{ width: splitterWidth + 'px' }"
      @mousedown="startDrag"
      @click.stop="handleSplitterClick"
    >
      <div class="splitter-icon" @click.stop="toggleCollapse">
        {{ isCollapsed ? '>' : '<' }}
      </div>
    </div>
    
    <div 
      class="right-panel"
      :style="{ 
        width: isCollapsed ? `calc(100% - ${splitterWidth}px)` : `calc(100% - ${leftWidth + splitterWidth}px)`
      }"
    >
      <div class="right-content">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SplitContainer',
  props: {
    initialWidth: {
      type: Number,
      default: 200
    },
    minWidth: {
      type: Number,
      default: 100
    },
    maxWidth: {
      type: Number,
      default: 500
    },
    splitterWidth: {
      type: Number,
      default: 8
    }
  },
  data() {
    return {
      leftWidth: this.initialWidth,
      isDragging: false,
      isCollapsed: false,
      startX: 0,
      startWidth: 0,
      savedWidth: this.initialWidth // 保存折叠前的宽度
    }
  },
  mounted() {
    document.addEventListener('mousemove', this.handleDrag);
    document.addEventListener('mouseup', this.stopDrag);
    document.addEventListener('selectstart', this.preventSelect);
  },
  beforeUnmount() {
    document.removeEventListener('mousemove', this.handleDrag);
    document.removeEventListener('mouseup', this.stopDrag);
    document.removeEventListener('selectstart', this.preventSelect);
  },
  // Vue 2 兼容
  beforeDestroy() {
    document.removeEventListener('mousemove', this.handleDrag);
    document.removeEventListener('mouseup', this.stopDrag);
    document.removeEventListener('selectstart', this.preventSelect);
  },
  methods: {
    startDrag(e) {
      if (this.isCollapsed) return;
      
      this.isDragging = true;
      this.startX = e.clientX;
      this.startWidth = this.leftWidth;
      
      // 添加拖拽时的样式
      document.body.style.cursor = 'col-resize';
      document.body.style.userSelect = 'none';
      
      e.preventDefault();
    },
    handleDrag(e) {
      if (!this.isDragging || this.isCollapsed) return;
      
      const dx = e.clientX - this.startX;
      let newWidth = this.startWidth + dx;
      
      // 限制宽度在最小和最大值之间
      newWidth = Math.max(this.minWidth, Math.min(this.maxWidth, newWidth));
      
      this.leftWidth = newWidth;
      this.savedWidth = newWidth; // 保存当前宽度
      
      // 触发resize事件，通知父组件
      this.$emit('resize', {
        leftWidth: newWidth,
        rightWidth: this.getRightWidth()
      });
    },
    stopDrag() {
      if (this.isDragging) {
        this.isDragging = false;
        
        // 恢复默认样式
        document.body.style.cursor = '';
        document.body.style.userSelect = '';
        
        // 触发resize完成事件
        this.$emit('resize-end', {
          leftWidth: this.leftWidth,
          rightWidth: this.getRightWidth()
        });
      }
    },
    toggleCollapse(e) {
      e.stopPropagation();
      
      if (this.isCollapsed) {
        // 展开：恢复到保存的宽度
        this.leftWidth = this.savedWidth;
        this.isCollapsed = false;
      } else {
        // 折叠：保存当前宽度，然后设置为0
        this.savedWidth = this.leftWidth;
        this.isCollapsed = true;
      }
      
      // 使用 nextTick 确保 DOM 更新后再触发事件
      this.$nextTick(() => {
        this.$emit('collapse-change', {
          isCollapsed: this.isCollapsed,
          leftWidth: this.isCollapsed ? 0 : this.leftWidth,
          rightWidth: this.getRightWidth()
        });
      });
    },
    handleSplitterClick(e) {
      // 防止在拖拽结束时误触发点击事件
      if (this.isDragging) {
        this.isDragging = false;
        return;
      }
    },
    preventSelect(e) {
      if (this.isDragging) {
        e.preventDefault();
      }
    },
    getRightWidth() {
      // 计算右侧面板的实际宽度
      const containerWidth = this.$el ? this.$el.offsetWidth : 0;
      const usedWidth = this.isCollapsed ? this.splitterWidth : (this.leftWidth + this.splitterWidth);
      return Math.max(0, containerWidth - usedWidth);
    },
    // 公开方法：设置左侧面板宽度
    setLeftWidth(width) {
      const newWidth = Math.max(this.minWidth, Math.min(this.maxWidth, width));
      this.leftWidth = newWidth;
      this.savedWidth = newWidth;
      if (!this.isCollapsed) {
        this.$emit('resize', {
          leftWidth: newWidth,
          rightWidth: this.getRightWidth()
        });
      }
    },
    // 公开方法：获取当前状态
    getState() {
      return {
        leftWidth: this.leftWidth,
        rightWidth: this.getRightWidth(),
        isCollapsed: this.isCollapsed,
        isDragging: this.isDragging,
        savedWidth: this.savedWidth
      };
    }
  }
}
</script>

<style scoped>
.split-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

.left-panel {
  flex-shrink: 0;
  overflow: hidden;
  background-color: #f5f5f5;
  transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
  border-right: 1px solid #e0e0e0;
  height: 100%;
  align-self: stretch;
}

.left-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 8px;
}

.right-panel {
  flex-shrink: 0;
  overflow: hidden;
  background-color: #fff;
  transition: width 0.3s ease;
  position: relative;
  height: 100%;
  align-self: stretch;
}

.right-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 8px;
}

.splitter {
  flex-shrink: 0;
  background-color: #e0e0e0;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  transition: background-color 0.2s ease;
  align-self: stretch;
  height: auto;
  min-height: 100%;
}

.splitter:hover {
  background-color: #d0d0d0;
}

.splitter:active {
  background-color: #c0c0c0;
}

.splitter-icon {
  width: 16px;
  height: 32px;
  background-color: #ccc;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.splitter-icon:hover {
  background-color: #bbb;
  transform: scale(1.1);
}

.splitter-icon:active {
  background-color: #aaa;
  transform: scale(0.95);
}

/* 拖拽时的全局样式 */
.split-container.dragging {
  user-select: none;
}

.split-container.dragging * {
  pointer-events: none;
}

.split-container.dragging .splitter {
  pointer-events: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .left-content,
  .right-content {
    padding: 4px;
  }
  
  .splitter {
    width: 6px;
  }
  
  .splitter-icon {
    width: 12px;
    height: 24px;
    font-size: 10px;
  }
}

/* 动画效果 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.left-content {
  animation: slideIn 0.3s ease-out;
}

/* 滚动条样式 */
.left-content::-webkit-scrollbar,
.right-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.left-content::-webkit-scrollbar-track,
.right-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.left-content::-webkit-scrollbar-thumb,
.right-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.left-content::-webkit-scrollbar-thumb:hover,
.right-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 确保父容器有正确的高度 */
.split-container,
.split-container * {
  box-sizing: border-box;
}

/* 强制splitter高度 */
.splitter {
  /* height: 100% !important; */
  min-height: 100% !important;
  max-height: 100% !important;
}
</style>